<template>
  <div>
    <el-tree
      ref="tree"
      :data="tableData"
      show-checkbox
      default-expand-all
      check-strictly
      node-key="id"
      :default-expanded-keys="[2, 3]"
      :default-checked-keys="data"
      :props="defaultProps"
    />
    <el-row slot="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button size="small" @click="$emit('update:dialogTableVisible1', false)">取消</el-button>
        <el-button size="small" type="primary" @click="hSubmit">确定</el-button>
      </el-col>
    </el-row>
  </div>

</template>

<script>
import { mapState } from 'vuex'
import { getRoleDetail } from '@/api/setting'

export default {
  name: 'VueAdminTemplateMasterSetpermissions',
  props: {
    dialogTableVisible1: {
      type: Boolean
    }
  },
  data() {
    return {
      id: '',
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },

  async created() {
    await this.$store.dispatch('permissions/getPermissionList')
    this.getRoleDetail()
  },

  computed: {
    ...mapState('permissions', ['tableData'])
  },

  methods: {
    async getRoleDetail() {
      const res = await getRoleDetail(this.id)
      console.log(res)
      if (res.code === 10000) {
        this.data = res.data.permIds
      }
    },
    hSubmit() {
      console.log(this.$refs.tree.getCheckedKeys())
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
